<template>
  <div class="p-5 pt-6">
    <div class="flex flex-col mb-5">
      <h4 class="mb-2">分配时间</h4>
      <CustomDate ref="customDateRef" @updateParentSelectDataType="updateParentSelectDataType"/>
    </div>

    <div class="flex flex-col mb-5">
      <h4 class="mb-2">跟进状态</h4>
      <van-row :gutter="[10, 10]">
        <van-col v-for="(item,index) in followArr" :key="index" span="12" class="centered-col">
          <van-button :type="item.value == selectFollowType ? 'primary' : 'default'"
                      style="width:100%"
                      plain
                      @click="selectFollow(item.value)" >
            {{ item.name }}
          </van-button>
        </van-col>
      </van-row>
    </div>


    <div class="flex flex-col mb-5">
      <h4 class="mb-2">线索状态</h4>
      <van-row :gutter="[10, 10]">
        <van-col v-for="(item, index) in statusArr" :key="index" span="12" class="centered-col">
          <van-button :type="selectedStatusTypes.has(item.value) ? 'primary' : 'default'"
                      style="width:100%"
                      plain
                      @click="toggleSelection(selectedStatusTypes,item.value)">
            {{ item.name }}
          </van-button>
        </van-col>
      </van-row>
    </div>


    <div class="flex flex-col mb-5">
      <h4 class="mb-2">潜客阶段</h4>
      <van-row :gutter="[10, 10]">
        <van-col v-for="(item, index) in phaseArr" :key="index" span="8" class="centered-col">
          <van-button :type="selectedPhaseTypes.has(item.value) ? 'primary' : 'default'"
                      style="width:100%"
                      plain
                      @click="toggleSelection(selectedPhaseTypes,item.value)">
            {{ item.name }}
          </van-button>
        </van-col>
      </van-row>
    </div>


    <div class="flex flex-col mb-5">
      <h4 class="mb-2">身份等级</h4>
      <van-row :gutter="[10, 10]">
        <van-col v-for="(item, index) in profileArr" :key="index" span="8" class="centered-col">
          <van-button :type="selectedProfileTypes.has(item.value) ? 'primary' : 'default'"
                      style="width:100%"
                      plain
                      @click="toggleSelection(selectedProfileTypes,item.value)">
            {{ item.name }}
          </van-button>
        </van-col>
      </van-row>
    </div>

    <div class="flex flex-col mb-5">
      <h4 class="mb-2">行为等级</h4>
      <van-row :gutter="[10, 10]">
        <van-col v-for="(item, index) in actionArr" :key="index" span="8" class="centered-col">
          <van-button :type="selectedActionTypes.has(item.value) ? 'primary' : 'default'"
                      style="width:100%"
                      plain
                      @click="toggleSelection(selectedActionTypes,item.value)">
            {{ item.name }}
          </van-button>
        </van-col>
      </van-row>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref,computed} from 'vue'
import { CustomDate } from '@/views/components/leads/index';

interface queryParam{
  leads_status_uuid?:object
  leads_remark_uuid?:string
  assign_sale_updated_at?:object
  leads_phase?:object
  profile_scoring_level?:object
  action_scoring_level?:object
  assign_sale_uuid?:string
}
const queryParam = ref<queryParam>({});

// 1.时间
const customDateRef = ref<InstanceType<typeof CustomDate> | null>(null);
//a. 提交时调用次方法
const confirmCustomDate = () => {
  if (customDateRef.value && 'triggerConfirm' in customDateRef.value) {
    let date = (customDateRef.value as any).triggerConfirm();
    if(date){
      queryParam.value.assign_sale_updated_at = date
    }else{
      delete queryParam.value.assign_sale_updated_at
    }
  }
}
const clearCustomDate = () => {
  if (customDateRef.value && 'triggerCancel' in customDateRef.value) {
    (customDateRef.value as any).triggerCancel();
  }
}
// b. 供子组件调用
const selectDateType = ref<string|null>(null)
const updateParentSelectDataType = (newValue: string|null) =>{
  selectDateType.value = newValue
}


const followArr = [
  {name:"未跟进",value:0},
  {name:"跟进",value:1}
]
const selectFollowType = ref<number|null>(null)
const selectFollow = (value:number) => {
  if(selectFollowType.value !== value){
    selectFollowType.value = value
  }else{
    selectFollowType.value = null
  }
}

const statusArr = [
  {name:"有效线索",value:"xxx1"},
  {name:"销售退回",value:"xxx2"},
  {name:"有意向",value:"xxx3"},
]
const selectedStatusTypes = ref(new Set<string>());


const phaseArr = [
  {name:"潜客",value:"leads"},
  {name:"市场部认可",value:"mql"},
  {name:"销售接受",value:"sal"},
  {name:"销售认可",value:"sql"},
  {name:"客户",value:"customer"},
]
const selectedPhaseTypes = ref(new Set<string>());


const profileArr = [
  {name:"A",value:"A"},
  {name:"B",value:"B"},
  {name:"C",value:"C"},
  {name:"D",value:"D"},
  {name:"E",value:"E"},
]
const selectedProfileTypes = ref(new Set<string>());

const actionArr = [
  {name:"等级1",value:'1'},
  {name:"等级2",value:'2'},
  {name:"等级3",value:'3'},
  {name:"等级4",value:'4'},
  {name:"等级5",value:'5'},
]
const selectedActionTypes = ref(new Set<string>());


const toggleSelection = (set: Set<string>, value: string) => {
  if (set.has(value)) {
    set.delete(value);
  } else {
    set.add(value);
  }
  console.log([...set]); // 以数组形式打印，便于阅读
}




const cancelQuery = ()=>{
  clearCustomDate()
  selectedPhaseTypes.value = new Set<string>();
  selectedStatusTypes.value = new Set<string>();
  selectedProfileTypes.value = new Set<string>();
  selectedActionTypes.value = new Set<string>();
}
const confirmQuery = ()=>{
  //1.时间
  confirmCustomDate();
  //2.阶段
  dealQueryParam(selectedPhaseTypes.value,'leads_phase')
  dealQueryParam(selectedStatusTypes.value,'leads_status_uuid')
  dealQueryParam(selectedProfileTypes.value,'profile_scoring_level')
  dealQueryParam(selectedActionTypes.value,'action_scoring_level')
  return queryParam.value
}


const dealQueryParam = (set: Set<string>, key: keyof queryParam) => {
  const array = [...set]
  if (array.length > 0) {
    (queryParam.value as any)[key] = {
      in: array
    };
  } else {
    delete queryParam.value[key];
  }
};

// 计算属性检查集合是否为空
const isQuery = computed(() => {
  return selectedPhaseTypes.value.size !== 0
      || selectedStatusTypes.value.size !== 0
      || selectedProfileTypes.value.size !== 0
      || selectedActionTypes.value.size !== 0
      || selectDateType.value !== null
});

// 可选：定义一个方法，可以通过父组件引用来调用
defineExpose({
  isQuery,
  confirmQuery,
  cancelQuery
})


</script>

<style scoped>

</style>
